<!--
 * @文件名称：  certificate.vue
 * @包路径：   certificate
 * @版权所有： 北京数字医信科技有限公司 (C) 2020
 *
 * @文件描述:  certificate
 * @版本:       certificate
 * @作者        zhangshumiao
 * @创建时间    2020/3/14 21:53
 *
 * @修改记录：
  -----------------------------------------------------------------------------------------------
   ----------- 时间      |   修改人    |     修改的方法       |         修改描述   ---------------
  -----------------------------------------------------------------------------------------------
-->
<template>
  <el-row>
    <div style="margin: 0 auto;">
      <img src="" style="display: none;"/>
    </div>
    <div class="canvasPic" id="capture" ref="imageWrapper">
      <div class="canvasImg">
        <div class="canvasLogo">
          <img src="../../assets/image/signaLogo.png" alt="" style="width: 100%;height: 100%">
        </div>
        <h3 v-if="diffVal==1" style="text-align: center;margin: 20px 0;">医网信签名证据报告</h3>
        <h3 v-if="diffVal==2" style="text-align: center;margin: 20px 0;">医网信数字证书</h3>
        <p class="infoBoxStyle" v-if="diffVal==1">
          医生姓名:<span>{{certificateResultObj.doctorName}}</span>
        </p>
        <p class="infoBoxStyle" v-if="diffVal==2">
          姓名:<span>{{certificateResult.name}}</span>
        </p>
        <p class="infoBoxStyle" v-if="diffVal==2">
          性别:<span>{{certificateResult.sex}}</span>
        </p>
        <p class="infoBoxStyle" v-if="diffVal==2">
          单位:<span>{{certificateResult.patientName}}</span>
        </p>
        <p class="infoBoxStyle" v-if="diffVal==2">
          资格证书类型:<span>{{certificateResult.doctorName}}</span>
        </p>
        <p class="infoBoxStyle" v-if="diffVal==1">
          患者姓名:<span>{{certificateResultObj.patientName}}</span>
        </p>
        <p class="infoBoxStyle" v-if="diffVal==1">
          签名数据编号:<span>{{certificateResultObj.uniqueid}}</span>
        </p>
        <p class="infoBoxStyle" v-if="diffVal==1">
          时间戳签名时间:<span>{{certificateResultObj.createTime}}</span>
        </p>
        <p class="infoBoxStyle" v-if="diffVal==1">
          医师签名时间:<span>{{certificateResultObj.signTime}}</span>
        </p>
        <p class="infoBoxStyle" style="white-space:normal;word-wrap: break-word;" v-if="diffVal==1">
          签名原文: <span>{{certificateResultObj.recipeInfo}}</span>
        </p>
        <p class="infoBoxStyle" style="text-indent: 28px;" v-if="diffVal==1">
          该条签名数据经过时间戳签名，时间戳验证成功。证明电子数据自时间戳时间时刻起未发生任何改动。
        </p>
        <p class="infoBoxStyle" style="text-indent: 28px;" v-if="diffVal==2">
          该人员已通过北京数字认证股份有限公司线下资格审定及身份真实性验证,该人员身份及信息真实可靠，特此认证。
        </p>
        <!--签名值-->
        <p class="infoBoxStyle" style="text-indent: 28px;" v-if="diffVal==1">
          该条签名数据经过<span>{{certificateResultObj.doctorName}}</span>签名，<span>{{certificateResultObj.doctorName}}
        </span>已通过北京数字认证股份有限公司线下资格审定及身份真实认证。证明电子数据已得到<span>{{certificateResultObj.doctorName}}</span>本人认可。
        </p>
        <div class="infoBoxStyle canvasSignBox" v-if="diffVal==1">
          <p class="canvasSignName">证明机构：北京数字认证股份有限公司</p>
          <p class="canvasSignTime">证明时间：<span>{{certificateResultObj.createTime}}</span></p>
          <img src="../../assets/image/signaywx.png" class="canvasSignPic" alt="公司盖章">
        </div>
        <div class="infoBoxStyle digitalCertBox" v-if="diffVal==2">
          <p class="canvasSignName">颁发机构：北京数字认证股份有限公司</p>
          <p class="digitalCertTime">颁发时间：<span>2020年03月05日</span></p>
          <p class="digitalEffectTime">有效时间：<span>2020年04月05日</span></p>
          <img src="../../assets/image/signaywx.png" class="digitalCertPic" alt="公司盖章">
        </div>
      </div>
      <div class="canvasSignTips">
        <p>--证书说明--</p>
        <p>本授权证书以证书为有效文本、不得影印、涂改、转让。</p>
        <p>北京数字认证股份有限公司拥有此授权书的最终解释权。</p>
      </div>
    </div>
  </el-row>
</template>

<script>
import html2canvas from 'html2canvas';
export default {
  props: {
    diffVal: {
      type: String,
      default: ''
    },
    certificateResult: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    certificateResultObj() {
      console.log(this.certificateResult)
      return this.certificateResult;
    }
  },
  methods: {
    signToImage() {
      html2canvas(this.$refs.imageWrapper, {
        backgroundColor: null,
        async: true,
        useCORS: true, // 允许图片跨域
        taintTest: true, // 在渲染前测试图片
        timeout: 500, // 加载延时
      }).then((canvas) => {
        let dataURL = canvas.toDataURL('image/png');
        var a = document.createElement('a');
        a.download = '医网信签名报告' + '.png';
        a.href = dataURL;
        document.body.append(a); // 修复firefox中无法触发click
        a.click();
        a.remove();
        canvas.toBlob((blob) => {
          console.log(blob)
        })
      });
    },
  }
}
</script>

<style>
</style>
